<template>
  <div>
    <el-card style="font-weight:700">
      用户评价管理
    </el-card>
    <el-card style="margin-top:20px">
      <!-- 底部的结构 -->
      <el-button type="primary" icon="el-icon-plus" @click="showDialog"
        >添加评价</el-button
      >
      <!-- table表格 -->
      <el-table style="width: 100%;margin-top:10px" border :data="userEvaluate">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        ></el-table-column>

        <el-table-column label="用户头像" width="150px">
          <template slot-scope="{ row, $index }">
            <img :src="row.userImgs" style="width:60px;height: inherit;" />
          </template>
        </el-table-column>

        <el-table-column
          prop="userName"
          label="用户名称"
          width="150px"
        ></el-table-column>

        <el-table-column label="评价详情" prop="comment" width="width">
        </el-table-column>

        <el-table-column
          prop="accountNumber"
          label="订单编号"
          width="150px"
        ></el-table-column>

        <el-table-column prop="prop" label="操作" width="300px">
          <!-- <template slot-scope="{row,$index}"> -->
          <template slot-scope="{ row, $index }">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              title="添加"
              @click=""
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              title="修改"
              @click=""
            ></el-button>
            <el-button
              type="info"
              icon="el-icon-warning"
              size="mini"
              title="查看"
              @click=""
            ></el-button>
            <!-- <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              title="删除"
              @click="deleteAss"
            ></el-button> -->
            <el-popconfirm
              :title="`确定删除${row.userName}的评论吗？`"
              icon="el-icon-warning"
              icon-color="red"
              @onConfirm="delStore($index)"
            >
              <el-button
                slot="reference"
                icon="el-icon-delete"
                size="mini"
                style="margin:0 10px;background-color: #f56c6c; color:#F8F8FF"
                ></el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加评论 -->
    <el-dialog title="添加评价" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="评论详情" :label-width="formLabelWidth">
          <el-input v-model="form.comment" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单编号" :label-width="formLabelWidth">
          <el-input v-model="form.accountNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="评论类型" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择评论类型">
            <el-option label="好评" value="shanghai"></el-option>
            <el-option label="差评" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 分页器 -->
    <!-- @@current-change:自定义事件，当用户点击分页按钮的时候会出发，这个自定义事件回调，会把用户选中的当前页数注入到回调 -->
    <el-pagination
      style="textAlign:center"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->,sizes,total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      limit: 2,
      dialogFormVisible: false,
      form: {
        userName: "",
        // 姓名
        region: "",
        // 评价类型
        type: [],
        comment: "",
        accountNumber: ""
      },
      formLabelWidth: "120px"
    };
  },
  methods: {
    //  let userAss = this.$store.state.brand.userAll.userEvaluate.details
    showDialog() {
      // 点击修改dialogFormVisible弹出表单
      this.dialogFormVisible = true;
      // 清空上一次的数据
      this.form.name = "";
      this.form.pinglun = "";
      this.form.dingdan = "";
      this.form.region = "";
      // console.log(this);
      let { form } = this;
      this.userEvaluate.push(this.form);
      this.$message.success("添加成功");
    },
    //删除评论
    delStore(index) {
      this.userEvaluate.splice(index, 1);
      this.$message.success("删除成功");
    }
  },
  mounted() {
    // console.log(this.$store.getters);
  },
  computed: {
    ...mapGetters(["userEvaluate"])
  }
};
</script>

<style scoped lang="less"></style>
